<!DOCTYPE html>
<!--
这里是注释
-->
<!-- 这里是注释 -->
<!--HTML文件 需要 分成2部分
head和body
语法1: 所有的东西都是标签
标签 :1.<标签名 属性1="属性值 属性2="属性值.../>
     2.<标签名 属性1="属性值 属性2="属性值">这里可以放其他内容</标签名>
语法2: -->

<html lang="en">
<head>
    <!--头里的内容都不会显示在浏览器中
    是设置这个页面的一些基本属性用的-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--这里的内容 全部会显示在浏览器当中
所有在body中 写的内容都会 按顺序写在页面中,并不会换行
因为 我们没有告诉浏览器 要换行
所有的空格,换行 都会被浏览器渲染成一个空格-->
HelloHTML

<!--br 换行标签 单标签, 可以省略/ -->
<br/>
这是第二行<br>这是第三行

<!-- hr 分割线 也是单标签 可以不写/ -->
<hr>

<!--双标签 文本相关-->
<!--h标签 用来表示标题, 他会被浏览器渲染成指定的格式
HTML规定 标题最多到6级 再往后就没有了,也就没有格式了
标题标签 需要在 标签体中, 包裹 文本内容,使之成为标题
并且会 独立成行-->
<h1 id="sd">一级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<h100>100级标题</h100>
<hr>

<!--p标签 是段落标签, 每一个自然段用p标签包裹
这是我们 常用的标签
p标签只能成段, 独立换行, 不能保留内部格式-->
<p>这是段落1</p>
<p>这是段落2</p>
<p>这是段落3,段落3 很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</p>
<hr>

<h1>静夜思</h1>
<p>床前明月光,</p>
<p>疑是地上霜.</p>
<p>举头望明月,</p>
<P>低头思故乡.</P>
<hr>

<!--pre标签 作用和p标签类似, 只不过可以保留内部格式-->
<h1>咏鹅</h1>
<pre>鹅 鹅 鹅,</pre>
<pre>   曲项向天歌.</pre>
<pre>       白毛浮绿水,</pre>
<pre>           红掌拨清波.</pre>
<hr>

<!--我们可以使用 font 标签 包裹若干文字,
那么被包裹的文字,就有了设置字体钥匙的能力,
字体颜色: 使用color属性,HTML 内置了一些颜色信息
如 red,yellow...  可以直接使用这个颜色名
如果内置的这些颜色 都不能满足我们,那么我们可以使用
#6位16进制的数字,来表示一个颜色
#是必须写的
如果 rgb 三种颜色分量 的2个数位 数字是一样的
形如ff6677 AA8822 这种的
也可以用3位表示 即#F67 #-->
<h1>悯农</h1>
<p><font size="30">锄</font>禾<font color="red">日</font>当午,</p>
<p><font color="#ff8888">汗滴</font>禾下土.</p>
<p>谁知盘中餐,</p>
<p>粒粒皆辛苦.</p>
<hr>

<!--使用 font 设置 字体大小 只有档位,没有具体的大小
范围1-7 超出范围 按照边界条件
即 8以上 就按照7的大小,并且数字越大,字号越大-->
<p><font size="0">0</font></p>
<p><font size="1">1</font></p>
<p><font size="2">2</font></p>
<p><font size="3">3</font></p>
<p><font size="4">4</font></p>
<p><font size="5">5</font></p>
<p><font size="6">6</font></p>
<p><font size="7">7</font></p>
<p><font size="8">8</font></p>
<hr>

<!--使用 face属性来设置字体, 但是具体显示的是
什么字体 跟浏览器,跟操作系统 都没有关系
所以在网页中,很少会去改字体,而之后我们会学习
通过字体文件来显示图片-->
<p>这是一行文字</p>
<p><font face="宋体">这是一行文字</font></p>
<p><font face="隶书">这是一行文字</font></p>
<hr>

<!--
<strong>:加粗,标签可以用来加粗
<em>:斜体,也可以使用<i>
<del>:删除线,也可以使用<s>
<ins>:下划线,也可以使用<u>

<i>:设计的时候,是把它当做斜体来设计的
但是随着没有文化的程序员越来越多,
它被当做了 图标标签 专门用来显示一个图标(通过加载字体文件的方式)
被一厢情愿的认为是icon的简写
-->
<p>怒发冲冠，凭栏处、潇潇雨歇。抬望眼，仰天长啸，壮怀激烈。
    三十功名尘与土，八千里路云和月。莫等闲，白了少年头，空悲切。
    靖康耻，犹未雪。<strong>臣子恨</strong>，<em>何时灭</em>！
    <del>驾长车</del>
    ，踏破贺兰山缺。
    <ins>壮志饥餐胡虏肉</ins>
    ，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。
</p>
<hr>

<!--图片标签
src 属性, 指向的是图片的路径
如果直接以英文字母开头(MAC/LINUX)
那么表示的是相对路径,是相对于 当前的这个HTML页面
在相对路径中..表示上一级文件夹
          . 表示当前文件夹
路径 也可以使用绝对路径,但是不要使用
即 在src这 放入你图片文件的绝对路径
width : 图片宽
height: 图片高
改图片的尺寸,只是修改图片的显示尺寸,不会影响真实大小
并且不能保证图片的比列
如果想要保证图片的比例 , 只要指定宽/高的一个,另一个不要写
那么浏览器就会按照指定的大小 显示图片的 宽/高,
没指定的 就会按比例缩放
title 标题,鼠标放在图片上时 显示的文字
alt 当图片无法显示的时候,提示信息
          -->
<img src="葫芦娃.jpg" height="100" title="葫芦娃"/>
<img src="imgs/蛇精.jpg" height="100" alt="高清无码大图">
<img src="../imgs/爷爷.jpg" height="100">
<hr>

<!--音乐播放
使用src属性 指定音乐的位置 hidden属性指定 是否显示音乐播放的控件
隐藏起来(hidden="true")
-->
<embed src="姐姐.mp3">
    <hr>

    <!--列表-->
    <!--有序列表-->
    <ol type="I" start="1">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
    <!--无序列表-->
    <ul type="squar">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>
            <ul type="circle">
                <li>aaa</li>
                <li>bbb</li>
                <li>ccc</li>
            </ul>
    </ul>
    <hr>

    <!--超链接
    <a>表示超链接,可以点击去往不同的网页
    href是必填属性,表示要连接的地址
    文字要放在a标签的内部

    <a>标签默认属性是_self:表示在当前页面打开
    可以换成_blank,表示再打开一个新的标签页
    还有2个属性
    -->
    <a target="_blank" href="http://www.baidu.com" title="鼠标的提示">点击搜索</a>
    <br>
    <!--跳转到自己写的页面-->
    <a target="_blank" href="2_HiHTML.html">自己的页面</a>
    <br>
    <!--回到 锚点 只有#是刷新-->
    <a href="#sd">回到h1位置</a>


</body>
</html>